<template>
  <!-- 三级列表 -->
  <el-card shadow="always" style="margin-bottom: 10px">
    <CategorySelector></CategorySelector>
  </el-card>
  <el-card>
    <!-- spu列表界面  spulist.vue -->
    <SpuList v-if="showStatus === ShowStatus.SPU_LIST" @setShowStatus="setShowStatus" @setCurrentSpuInfo="setCurrentSpuInfo"></SpuList>
    <!-- spu添加或修改界面  spuform.vue-->
    <SpuForm v-else-if="showStatus === ShowStatus.SPU_ADD" @setShowStatus="setShowStatus" :currentSpuInfo="currentSpuInfo"></SpuForm>
    <!-- sku添加界面  skuform.vue-->
    <SkuForm v-else @setShowStatus="setShowStatus" :spu="{ id: currentSpuInfo.id as number, spuName: currentSpuInfo.spuName }"></SkuForm>
  </el-card>
</template>
<script lang="ts">
export default {
  name: "Spu",
};
</script>
<script lang="ts" setup>
import CategorySelector from "../../../components/CategorySelector/index.vue";
import SpuList from "./components/SpuList.vue";
import SpuForm from "./components/SpuForm.vue";
import SkuForm from "./components/SkuForm.vue";
import { ref } from "vue";
// 引入types 的类型
import { ShowStatus } from "./components/types";
import type { SpuModel } from "@/api/product/model/spuModel";
// 定义一个表达式  用来设置SpuList组件和SkuForm组件的显示或者隐藏
const showStatus = ref<ShowStatus>(ShowStatus.SPU_LIST);
// 用来修改显示或者隐藏的标识的方法
const setShowStatus = (val: ShowStatus) => {
  showStatus.value = val;
};
// 定义一个用来初始化spu对象数据的函数
const initSpuInfo = () => ({
  tmId: undefined, //品牌的名字
  spuName: "", //名字
  description: "", //描述信息
  spuImageList: [], //图片数组
  spuSaleAttrList: [], //销售属性数组
});
// 定义一个初始化的spu对象
const currentSpuInfo = ref<SpuModel>(initSpuInfo());
// 定义一个自定义事件的回调函数（分发事件，执行这个回调，传入spu对象，把初始化的spu对象重新赋值）
const setCurrentSpuInfo = (val: SpuModel = initSpuInfo()) => {
  currentSpuInfo.value = val;
};
</script>
<style scoped></style>
